<template>
  <div class="Dashborad">
    <div class="card-box">
      <div class="card" v-for="(item, index) in virtualData" :key="index">
        <div class="ico">
          <i :class="{ [dashborad__[index].ico]: true }"></i>
        </div>
        <div class="info-content">
          <div class="count">{{ item.count }}</div>
          <div class="des">{{ dashborad__[index].text }}</div>
        </div>
      </div>
    </div>
    <div class="chart-box" ref="ChartBox">
      <span>本周会员变动</span>
      <div class="chart-1"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { dashborad__ } from '../utils'
import { use, init } from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { ElIcon } from 'element-plus'
use([GridComponent, LineChart, CanvasRenderer])
export default defineComponent({
  components: {
    ElIcon,
  },
  setup() {
    const ChartBox = ref(null)
    const virtualData = ref([
      { count: 201 },
      { count: 10 },
      { count: 34 },
      { count: 5000 },
      { count: 108 },
    ])
    // 初始化图表
    const initCharts = el => {
      const chart_1 = init(el.querySelector('.chart-1')).setOption({
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 人',
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
        ],
      })
    }
    onMounted(() => {
      initCharts(ChartBox.value)
    })
    return { virtualData, dashborad__, ChartBox }
  },
})
</script>

<style lang="scss">
@import '../assets/styles/_var.scss';
$card-height: 130px;
.Dashborad {
  height: 100%;
  padding: $pad-1;
  overflow: auto;
  .card-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: $pad-1;
    .card {
      display: flex;
      height: $card-height;
      background: $gray-2;
      .ico {
        width: $card-height / 1.5;
        flex-shrink: 0;
        i {
          display: block;
          line-height: $card-height;
          text-align: center;
          font-size: 3rem;
        }
      }
      .info-content {
        display: flex;
        justify-content: center;
        flex-direction: column;
        flex-grow: 1;
        padding: 0 #{$pad-2};
        .count {
          font-size: 25px;
        }
        .des {
          font-size: 0.85rem;
          font-weight: bold;
        }
      }
    }
  }
  .chart-box {
    span {
      display: block;
      margin: $pad-1 0;
      padding: 0 $pad-2;
      font-weight: bold;
      color: $gray-7;
      font-size: 0.9rem;
    }
    .chart-1 {
      height: 300px;
      // width: 100%;
    }
  }
}
</style>
